<template>
  <el-dialog title="新建任务" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="800px">
    <el-form ref="form" :rules="rules" :model="form" label-width="100px">
      <el-form-item label="检测方式" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio v-for="(item, index) in typeList"
                    :key="index"
                    :label="Number(item.value)">
            <div class="label-content">{{ item.label }}</div>
            <div class="tips-content">{{ item.tips }}</div>
          </el-radio>

        </el-radio-group>
      </el-form-item>
      <el-form-item label="检测对象：" prop="type" v-if="form.type==1">
        <el-button size="small" @click="handerSelectGroup('1')" class="mt-10">
          <i class="el-icon-sort rotate90 mr-8"></i> 选择客户群
        </el-button>
        <div class="user-images">
          <span>已选</span>
          <div class="img-li">
            <img src="@/assets/images/profile.jpg"/>
            <img src="@/assets/images/profile.jpg"/>
            <img src="@/assets/images/profile.jpg"/>
            <img src="@/assets/images/profile.jpg"/>
            <img src="@/assets/images/profile.jpg"/>
          </div>
          <div><i class="el-icon-more"></i></div>
          <div class="number">等5个</div>
        </div>
      </el-form-item>
      <el-form-item label="对象组A：" prop="type" v-if="form.type==2">
        <el-button size="small" @click="handerSelectGroup('2')" class="mt-10">
          <i class="el-icon-sort rotate90 mr-8"></i> 选择客户群
        </el-button>
        <div class="user-images">
          <span>已选</span>
          <div class="img-li">
            <img src="@/assets/images/profile.jpg"/>
            <img src="@/assets/images/profile.jpg"/>
            <img src="@/assets/images/profile.jpg"/>
            <img src="@/assets/images/profile.jpg"/>
            <img src="@/assets/images/profile.jpg"/>
          </div>
          <div><i class="el-icon-more"></i></div>
          <div class="number">等5个</div>
        </div>
      </el-form-item>
      <el-form-item label="对象组B：" prop="type" v-if="form.type==2">
        <el-button size="small" @click="handerSelectGroup('3')" class="mt-10">
          <i class="el-icon-sort rotate90 mr-8"></i> 选择客户群
        </el-button>
        <div class="user-images">
          <span>已选</span>
          <div class="img-li">
            <img src="@/assets/images/profile.jpg"/>
            <img src="@/assets/images/profile.jpg"/>
            <img src="@/assets/images/profile.jpg"/>
            <img src="@/assets/images/profile.jpg"/>
            <img src="@/assets/images/profile.jpg"/>
          </div>
          <div><i class="el-icon-more"></i></div>
          <div class="number">等5个</div>
        </div>
      </el-form-item>

    </el-form>
    <div class="footer-btn">
      <el-button type="primary" @click="handleCloseDialog">取消</el-button>
      <el-button @click="getSubmit('form')">提交</el-button>
    </div>
    <SelectClientGroup
      v-if="showgroup"
      width='1000px'
      height='500px'
      :visable.sync="showgroup"
      title="选择目标客户群"
      :isTable='true'
    />
  </el-dialog>
</template>

<script>

import SelectClientGroup from "@/components/UserGroupComp/SelectClientGroup.vue";

export default {
  name: 'reject',
  components: {SelectClientGroup},
  data() {
    return {
      showgroup:true,
      form: {
        type: 1,//检测方式
      },
      typeList: [
        {value: 1, label: '按群检测', tips: '检测所选群聊中的重复成员',},
        {value: 2, label: '按分组检测', tips: '选择两组群聊，检测两组群聊中的重复成员',}
      ],
      rules: {
        'type': [
          {required: true, message: '请输入驳回的原因', trigger: 'change'}
        ]
      }
    }
  },
  created() {
  },
  mounted() {
  },
  watch: {},
  methods: {
    handerSelectGroup(type) {
      if (type == 1) {
        //按群检测
      } else if (type == 2) {
        //对象群组A的逻辑
      } else if (type == 3) {
        //对象群组B的逻辑

      }
      this.showgroup = true;
    },
    getSubmit() {

    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false);
      this.$emit('handleQuery');
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog__body {
  height: auto !important;
}

.footer-btn {
  display: flex;
  justify-content: flex-end;
}

::v-deep .el-radio-group {
  display: flex;
  flex-wrap: wrap;

  .el-radio {
    padding: 10px;
    border: 1px solid #eee;
    display: flex;
    flex: 1;

    .el-radio__label {
      .tips-content {
        font-size: 12px;
        color: rgba(0, 0, 0, .45);
        line-height: 20px;
        margin-top: 5px;
      }
    }
  }
}

.user-images {
  height: 50px;
  display: flex;
  align-items: center;
  border: 1px solid #eee;
  padding: 0px 10px;
  color: #888;
  margin-top: 10px;

  .number {
    margin-left: 10px;
  }

  .img-li {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 5px;
    overflow: hidden;
    border-radius: 2px;

    img {
      width: 24px;
      height: 24px;
      object-fit: cover;
      margin: 0px 2px;
    }
  }
}
</style>
